1 files changed, 83 insertions, 0 deletions
diff --git a/src/app/anime/[id]/info.css b/src/app/anime/[id]/info.css
new file mode 100644
index 0000000..2b070d0
--- /dev/null
+++ b/src/app/anime/[id]/info.css
@@ -0,0 +1,83 @@
+.dramaInfoContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.dramaInfo {
+	display: flex;
+	flex-direction: column;
+	width: 95%;
+	margin: 0px auto;
+}
+
+.titleContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.titleContainer p {
+	color: var(--neon-green);
+	width: 60%;
+	font-family: "Kanit";
+	font-size: 24px;
+}
+
+.titleContainer img {
+	border-radius: 10px;
+}
+
+.animeDescription {
+	color: #ffffff81;
+	font-family: "Lato";
+	font-size: 16px;
+	max-height: 120px;
+	margin: 20px auto;
+	text-align: center;
+	overflow-y: auto;
+}
+
+.buttonContainer {
+	margin: 5px auto;
+	text-align: center;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.dramaButton {
+	padding: 8px;
+	font-family: "Atkinson Hyperlegible";
+	font-size: 18px;
+	margin: 5px;
+	width: 50px;
+	border-radius: 5px;
+	border: none;
+	background-color: var(--light-green);
+	cursor: pointer;
+}
+
+.dramaButton:hover {
+	background-color: var(--soft-purple);
+}
+
+.infoPageContainer {
+	display: flex;
+	height: 100dvh;
+	justify-content: center;
+	align-items: center;
+}
+
+.infoPageContainer p {
+	color: white;
+}
+
+@media (prefers-color-scheme: light) {
+	.animeDescription {
+		color: black;
+	}
+
+	.infoPageContainer p {
+		color: black;
+	}
+
+}
+\ No newline at end of file